<template>
    <div class="post-list">
      <h2>交易记录</h2>
      <!-- 多选操作 -->
      <div class="top-opearations">
        <el-button style="width: 100px ;" type="primary" size="small" @click="cancelSelectedOrders">取消交易</el-button>
      </div>
      <!-- 错误信息提示 -->
      <div v-if="error" class="error">加载失败: {{ error }}</div>
      <!-- 数据为空时的提示 -->
      <div v-else-if="transactions.length === 0" class="empty">暂无交易记录</div>
      <!-- 使用 Element Plus 表格展示数据 -->
      <el-table
        v-else
        :data="transactions"
        style="width: 100%;text-align: center;"
        border
        @selection-change="handleSelectionChange"
      >
      <el-table-column type="selection" v-if="status===0 || status===1 || status===2" width="40px" align="center"></el-table-column>
      <!-- <el-table-column width="40px" align="center">{{status}}</el-table-column> -->
        <!-- 图片列 -->
        <el-table-column label="商品图片" align="center">
          <template #default="scope">
            <img
              :src="scope.row.image"
              alt="商品图片"
              class="transaction-image"
            />
          </template>
        </el-table-column>
        <!-- 商品名称列 -->
        <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
        <!-- 商品价格列 -->
        <el-table-column prop="price" label="价格" align="center">
          <template #default="scope">
            ¥{{ scope.row.price }}
          </template>
        </el-table-column>
        <!-- 购买数量列 -->
        <el-table-column prop="quantity" label="数量" align="center"></el-table-column>
        <!-- 下单时间列 -->
        <el-table-column prop="orderTime" label="下单时间" align="center"></el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  import {cancelOrder} from '@/apis/post'
  import { useUserStore } from "@/stores/user";

  export default {
    name: "PostList",
    props: {
        transactions: {
            type: Array,
            default: () => [],
        },
        error: {
            type: String,
            default: null,
        },
        status: {
          type: Number,
          required: true
        }
    },
    data() {
      return {
        selectedItems: [], // 选中的商品 goodId 列表
        selectAll: false, // 全选状态
      };
    },
    methods:{
      handleSelectionChange(selectedRows) {
      // 提取选中行的 goodId 并存储到数组中
      this.selectedGoodIds = selectedRows.map((row) => row.tradesId);
      console.log('当前选中的商品交易ID：', this.selectedGoodIds);
    },
      // 取消选中的订单
  async cancelSelectedOrders() {
    try {
      for (const tradeId of this.selectedGoodIds) {
        const response = await cancelOrder(tradeId);
        this.$message.success("选择订单已取消");
        // 需要刷新当前界面
        this.$emit("update-list");
        if (response.status === 'success') {
          console.log(`订单 ${tradeId} 已成功取消`);
        } else {
          console.error(`取消订单 ${tradeId} 失败:`, response.message);
        }
      }
    } catch (error) {
      console.error('取消订单时发生错误:', error);
    }
  },

      // 全选功能切换
      toggleSelectAll() {
        this.selectAll = !this.selectAll;
      },
    },
    setup() {
      const userStore = useUserStore();
      const userId = userStore.userAInfo.userId; // 从 Pinia 获取 userId
      return {
        userId,
      };
    },
  };
  </script>
  
  <style scoped>
  
  .top-operations{
    background-color: rgb(70, 204, 159);
    margin-left: 10px;
  }
  .empty {
    color: rgb(128, 128, 128);
    font-style: italic;
    margin: 10px 0;
  }
  
  .transaction-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 1px solid #ddd;
  }
  </style>
  